<template>
    <div class="main-container">
        <!-- 标题导航栏区域 -->
        <!-- <TitleBar /> -->
        <div class="titleBar-container" @click="open = true">
            <MenuOutlined />
        </div>

        <!-- 侧边栏导航区域 -->
        <div class="aside-container">
            <!-- 侧边导航 -->
            <AsideNav />
            <!-- 二级路由出口 -->
            <router-view name="LeftPanel"></router-view>
        </div>

        <a-drawer :width="300" placement="left" style="padding: 0" :open="open" :closable="false" @close="open = false">
            <div class="drawer-container">
                <!-- 侧边导航 -->
                <AsideNav />
                <!-- 二级路由出口 -->
                <router-view name="LeftPanel"></router-view>
            </div>
        </a-drawer>  
        
        <!-- 消息对话框区域 -->
        <div class="content-container">
            <!-- 二级路由出口 -->
            <router-view name="RightPanel"></router-view>
        </div>
    </div>
</template>

<script setup>
import TitleBar from '@/components/TitleBar.vue'
import AsideNav from '@/views/main/component/AsideNav.vue'
import { ref, onMounted, watchEffect } from 'vue'
import { MenuOutlined } from '@ant-design/icons-vue'

const open = ref(false)
const titleBar = ref(false)
</script>

<style lang="less" scoped>
.main-container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 300px 1fr;
    background-color: #EDEDED;
    position: relative;

    .titleBar-container {
        position: fixed;
        top: 18px;
        right: 18px;
        z-index: 999;
        display: none;
        font-weight: 500;
    }

    .aside-container {
        height: 100%;
        background-color: #F7F7F7;
        overflow: hidden;
        display: grid;
        grid-template-columns: 65px 1fr;
    }

    .content-container {
        height: 100%;
        background: #EDEDED;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.drawer-container {
    height: 100vh;
    display: grid;
    grid-template-columns: 65px 1fr;
}

@media screen and (max-width: 768px) {
    .main-container {
        grid-template-columns: 0 1fr;

        .titleBar-container {
            display: block;
        }
    }

}
</style>